<template>
  <div class="sort-list-container">
    <GoodsItem v-for="good in goodList" :key="good.id" :good="good" />
  </div>
  <!-- 加载更多组件 -->
  <XtxInfiniteLoad
    :isLoading="isLoading"
    :isFinished="isFinished"
    @Load="loadNext"
  />
</template>
<script>
import { findSubCategoryGoods } from '@/api/category'
import { useRoute } from 'vue-router'
import { inject, onMounted, ref, watch } from 'vue'
import GoodsItem from '@/views/Category/components/goods-item'
export default {
  components: {
    GoodsItem
  },
  setup () {
    const route = useRoute()
    // 获取list
    const goodList = ref([])
    // 请求参数
    let reqParams = {
      page: 1,
      pageSize: 20,
      categoryId: route.params.id,
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    }
    async function getGoodList () {
      isLoading.value = true // 加载首页数据的时候，先把上拉功能关掉
      const res = await findSubCategoryGoods(reqParams)
      goodList.value = res.data.result.items
      isLoading.value = false // 搞定第一页数据关闭
    }
    onMounted(() => {
      getGoodList()
    })
    watch(
      () => {
        return route.params.id
      },
      () => {
        // 初始化参数
        reqParams.page = 1
        //   reqParams.pageSize = 20
        reqParams.categoryId = route.params.id
        getGoodList()
      }
    )

    // 引入顶层组件提供的额外参数
    const filterData = inject('filterData')
    // 监听一下filterData 变化一旦发生变化重新调用接口
    watch(
      () => {
        return filterData
      },
      () => {
        // 重新拉取数据
        // 需要使用最新的查询字段替换reqparams然后只用替换之后的发送请求
        reqParams = { ...reqParams, ...filterData }
        // filterData.attrs = filterData.attrs.map((item) => {
        //   return {
        //     groupName: item.groupName,
        //     propertyName: item.propertyName
        //   }
        // })
        getGoodList()
      },
      { deep: true }
    )
    // 加载下一页
    const isLoading = ref(false) // 是否在加载中
    const isFinished = ref(false) // 是否加载完毕
    async function loadNext () {
      // 加载下一页逻辑编写
      // 把状态变成加载中
      // 把页数字段自增 然后发送请求
      // 拿到请求数据：
      // 判断是否加载完毕isFinished设置为true
      // 数据拼接 老数据 + 新数据, 把加在状态重新设置为false
      isLoading.value = true
      reqParams.page++
      const res = await findSubCategoryGoods(reqParams)
      if (res.data.result.items.length === 0) {
        isFinished.value = true
      }
      goodList.value = [...goodList.value, ...res.data.result.items]
      isLoading.value = false
    }
    return {
      goodList,
      isLoading,
      isFinished,
      loadNext
    }
  }
}
</script>
<style lang="less" scoped>
.sort-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
  }
  p {
    padding-top: 10px;
  }
  .name {
    font-size: 16px;
  }
  .desc {
    color: #999;
    height: 29px;
  }
  .price {
    color: @priceColor;
    font-size: 20px;
  }
}
</style>
